<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的音乐</title>
  <link rel="stylesheet" href="../css/mymusic.css">
</head>
<body>
  <!-- 我的音乐头部开始 -->
  <div class="mymusic" id="mymusic">
    <div class="per_header">
      <div class="per_header_title clearfix">
        <div class="per_logo">
          <img src="../image/mymusic_img/demologo.png" alt="">
        </div>
        <ul>
          <li><a href="./index.html" id="index">首页</a></li>
          <li><a href="#">音乐馆</a></li>
          <li><a href="#">我的音乐</a></li>
          <li><a href="#">客户端</a></li>
          <li><a href="#">音乐号</a></li>
        </ul>
        <input type="text" placeholder="搜索音乐、歌手、MV、歌单" name="search" value="" autocomplete="off" maxlength="16">
        <input type="button">
        <a href="" id="editPre">编辑个人资料</a>
      </div>
      <!-- 收藏的歌曲部分 -->
      <div class="per_cont">
        <div class="headport">
          <a href="javascript:;"><img src="" alt="" id="user_img"></a>
        </div>
        <a href="javascript:;" class="user_name" id="user_name"></a>
        <div class="foll_fans">
          <a href="javascript:;"><p>33</p><p>关注</p></a>
          <a href="javascript:;"><p>0</p><p>粉丝</p></a>
        </div>
          <ul class="clearfix">
            <li><a href="javascript:;">我喜欢</a></li>
            <li><a href="javascript:;">我创建的歌单</a></li>
            <li><a href="javascript:;">关注</a></li>
            <li><a href="javascript:;">粉丝</a></li>
            <li><a href="javascript:;">我上传的视频</a></li>
          </ul>
      </div>
    </div>
    <!-- 我的音乐主体开始 -->
    <div class="per_body">
      <div class="my_colle">
        <ul class="clearfix">
          <li><a href="javascript:;" class="geqv">158</a></li>
          <li><a href="javascript:;" class="gedan">0</a></li>
          <li><a href="javascript:;" class="zhuanji">0</a></li>
          <li><a href="javascript:;" class="mv">0</a></li>
        </ul>
      </div>
      <!--  播放设置  -->
      <div class="play_set">
        <ul class="clearfix">
          <li>
            <div><img src="../image/mymusic_img/playall.svg" alt=""></div>
            <a href="javascript:;">播放全部</a>
          </li>
          <li>
            <div><img src="../image/mymusic_img/add1.svg" alt=""></div>
            <a href="javascript:;">添加到</a>
          </li>
          <li>
            <div><img src="../image/mymusic_img/download.svg" alt=""></div>
            <a href="javascript:;">下载</a>
          </li>
          <li>
            <div id="batch_img"><img src="../image/mymusic_img/batch.svg" alt=""></div>
            <a href="javascript:;" onclick="batch()" id="batch1">批量操作</a>
          </li>
        </ul>
      </div>
      <!-- 收藏歌曲全部信息的展示 -->
      <div class="song_information">
        <table class="like_song table table-striped">
          <thead>
            <tr>
              <td>
                <input type="checkbox" class="check_btn1" name="check1" value="1" onclick="che()">
              </td>
              <td>歌曲</td>
              <td>歌手</td>
              <td>专辑</td>
              <td>时长</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <input type="checkbox" class="check_btn" name="check" value="1">
              </td>
              <td>
                <a href="javascript:;">退后</a>
                <a href="javascript:;">独家</a>
                <a href="javascript:;">MV</a>
                <div class="song_set">
                  <a href="javascript:;" class="song_set_play"></a>
                  <a href="javascript:;" class="song_set_add"></a>
                  <a href="javascript:;" class="song_set_share"></a>
                </div>
              </td>
              <td><a href="javascript:;">周杰伦</a></td>
              <td><a href="javascript:;">依然范特西</a></td>
              <td>
                <a href="javascript:;" class="deltime">04:21</a>
                <a href="javascript:;" class="delpic">
                  
                </a>
              </td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" class="check_btn" name="check" value="1">
              </td>
              <td>
                <a href="javascript:;">退后</a>
                <a href="javascript:;">独家</a>
                <a href="javascript:;">MV</a>
                <div class="song_set">
                  <a href="javascript:;" class="song_set_play"></a>
                  <a href="javascript:;" class="song_set_add"></a>
                  <a href="javascript:;" class="song_set_share"></a>
                </div>
              </td>
              <td><a href="javascript:;">周杰伦</a></td>
              <td><a href="javascript:;">依然范特西</a></td>
              <td>
                <a href="javascript:;" class="deltime">04:21</a>
                <a href="javascript:;" class="delpic">
                  
                </a>
              </td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" class="check_btn" name="check" value="1">
              </td>
              <td>
                <a href="javascript:;">退后</a>
                <a href="javascript:;">独家</a>
                <a href="javascript:;">MV</a>
                <div class="song_set">
                  <a href="javascript:;" class="song_set_play"></a>
                  <a href="javascript:;" class="song_set_add"></a>
                  <a href="javascript:;" class="song_set_share"></a>
                </div>
              </td>
              <td><a href="javascript:;">周杰伦</a></td>
              <td><a href="javascript:;">依然范特西</a></td>
              <td>
                <a href="javascript:;" class="deltime">04:21</a>
                <a href="javascript:;" class="delpic">
                </a>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 分页查询 -->
        <div class="paging">
          <ul class="clearfix">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>&gt;</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 我的音乐底部开始 -->
    <div class="footer">
      <div class="footer_cont clearfix">
        <div class="footer_cont_left">
          <ul class="clearfix">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">版权声明</a></li>
            <li><a href="#">诚聘英才</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">历史合作</a></li>
            <li><a href="#">唱片公司</a></li>
            <li><a href="#">广告服务</a></li>
            <li><a href="#">友情连接</a></li>
            <li class="cont_left_end"><a href="#">帮助中心</a></li>
          </ul>
          <p>Copyright&nbsp;&copy;2021&nbsp;HuanTingMusic&nbsp;All&nbsp;Rights&nbsp;Reserved</p>
        </div>
        <div class="footer_cont_right">
          <ul>
            <li class="cont_right_start">关注我们</li>
            <li><a href="#"><img src="../image/mymusic_img/index1.png" alt=""></a></li>
            <li><a href="#"><img src="../image/mymusic_img/index2.png" alt=""></a></li>
            <li>
              <a href="#"><img src="../image/mymusic_img/index3.png" alt=""></a>
              <div><img src="../image/mymusic_img/wx.jpg" alt=""></div>
            </li>
            <li><a href="#"><img src="../image/mymusic_img/index4.png" alt=""></a></li>
            <li><a href="#"><img src="../image/mymusic_img/index5.png" alt=""></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 未登录时显示的内容 -->
  <div class="mymusic_prompt" id="mymusic_prompt">
    <div>
      <h2>私人音乐空间,听我想听的歌</h2>
      <p>登录管理我的音乐,多终端同步</p>
      <a href="./login.html">立即登录</a>
    </div>
  </div>
</body>
<script src="../js/mymusic_js/batch.js"></script>
<script src="../js/mymusic_js/selected.js"></script>
<script src="../js/mymusic_js/mymusic.js"></script>
</html>